<template>
  <div class="a_z_userman">
    <a-breadcrumb>
      <a-breadcrumb-item>首页</a-breadcrumb-item>
      <a-breadcrumb-item>文章管理</a-breadcrumb-item>
      <a-breadcrumb-item>文章列表</a-breadcrumb-item>
    </a-breadcrumb>
    <!-- 搜索栏 -->
    <div class="btns">
      <a-button
        type="primary"
        icon="user-add"
        @click="()=>{this.$router.push('/article/addarticle')}"
      >新增</a-button>
    </div>
    <a-table :columns="columns" rowKey="index" :data-source="data">
      <a slot="id" slot-scope="id">
        <a-popconfirm
          title="你确定你要删了他？"
          ok-text="是的"
          cancel-text="算了"
          @confirm="confirm(id)"
          @cancel="cancel"
        >
          <a-button type="link" icon="delete">删除</a-button>
        </a-popconfirm>
      </a>
    </a-table>
  </div>
</template>

<script>
import { getArticle, delArticle } from '../../api/manage.js'
const columns = [
  {
    title: '文章类型',
    dataIndex: 'typeName',
    key: 'typeName',
    width: 200
  },
  {
    title: '文章简介',
    dataIndex: 'introduce',
    key: 'introduce',
    width: 200
  },
  {
    title: '文章标题',
    dataIndex: 'title',
    key: 'title',
    width: '200'
  },
  {
    title: '创建时间',
    dataIndex: 'addTime',
    key: 'addTime',
    width: '200'
  },
  {
    title: '操作',
    dataIndex: 'id',
    key: 'id',
    scopedSlots: { customRender: 'id' }
  }
]
export default {
  data () {
    return {
      data: [],
      columns
    }
  },
  async mounted () {
    this.initArticle()
  },
  methods: {
    async confirm (e) {
      const res = await delArticle(e)
      console.log(res)
      if (res.status === 200) {
        this.$notification.open({
          message: '提示',
          description: '删除成功',
          duration: 0
        })
      }
      this.initArticle()
    },
    cancel () {
      alert('算了我心软了')
    },
    async initArticle () {
      const res = await getArticle()
      console.log(res)
      this.data = res.data
    }
  }
}
</script>

<style lang='scss' scoped>
.search {
  margin-top: 1em;
}
.btns {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 1em;
  margin-bottom: 1em;
  .ant-btn {
    margin-right: 1em;
  }
}
.addInfo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.submit {
  display: flex;
  justify-content: center;
  align-items: center;
  .submit {
    width: 100%;
  }
}
.articledet {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
